<script setup>
import { Search } from '@element-plus/icons-vue';

const dataSource = ref([]);
const editNode = ref({});
const treeRef = ref(null);
const searchValue = ref('');
const nodeOperate = ref([
  {
    condition: data => !data.isEdit,
    icon: 'ep:plus',
    title: '添加下级',
    onClick: (node, data, evt) => handleAppend(node, data, evt),
  },
  {
    condition: data => data.isEdit,
    icon: 'ep:select',
    title: '保存',
    onClick: (node, data) => handleConfirm(data),
  },
  {
    condition: data => !data.isEdit,
    icon: 'ep:edit',
    title: '编辑',
    onClick: (node, data) => handleEdit(data),
  },
  {
    condition: data => data.isEdit,
    icon: 'ion:arrow-return-left',
    title: '取消',
    onClick: (node, data) => handleCancel(node, data),
  },
  {
    condition: data => !data.isEdit,
    icon: 'ep:delete',
    title: '删除',
    onClick: (node, data) => handleRemove(node, data),
  },
]);
const key = Math.random() * 1000;

const handleAppend = (node, data, evt) => {
  if (node && node.expanded) {
    evt.stopPropagation();
  }

  let nodeData = data;

  if (nodeData) {
    const newChild = { key: key + 1, label: '', children: [] };
    if (!nodeData.children) {
      nodeData = { ...nodeData, children: [] };
    }
    handleEdit(newChild);
    nodeData.children.push(newChild);
  } else {
    const newChild = { key: key + 1, label: '', children: [] };
    handleEdit(newChild);
    dataSource.value.push(newChild);
  }
};
const handleEdit = (data) => {
  const nodeData = data;

  nodeData.isEdit = true;
  editNode.value = { [data.key]: { ...nodeData } };
};
const handleConfirm = (data) => {
  const nodeData = data;

  nodeData.isEdit = false;
  nodeData.label = editNode.value[data.key].label;
};
const handleRemove = (node, data) => {
  const { parent } = node;
  const children = parent.data.children || parent.data;
  const index = children.findIndex(d => d.key === data.key);
  children.splice(index, 1);
  dataSource.value = [...dataSource.value];
};
const handleCancel = (node, data) => {
  const nodeData = data;

  nodeData.isEdit = false;
};
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};

watch(searchValue, (val) => {
  treeRef.value?.filter(val);
});
</script>

<template>
  <div class="create-important-item-tree">
    <div class="title">
      <label class="title_label">审计事项目录</label>
      <el-button class="title__btn" type="primary" @click="() => handleAppend()">新增事项</el-button>
    </div>
    <div class="title-line"></div>
    <el-input
      v-if="dataSource.length > 0"
      v-model="searchValue"
      class="search-input"
      placeholder="搜索事项名称"
      :suffix-icon="Search"
    />
    <el-tree
      ref="treeRef"
      class="tree"
      :data="dataSource"
      node-key="key"
      :filter-node-method="filterNode"
    >
      <template #default="{ node, data }">
        <span class="tree-node">
          <span class="tree-node__label">
            <el-input
              v-if="data.isEdit"
              v-model="editNode[data.key].label"
              size="small"
              placeholder="请输入事项内容"
            />
            <span v-else>{{ data.label }}</span>
          </span>
          <span class="tree-node__icons">
            <template v-for="o in nodeOperate" :key="o.icon">
              <iconify-icon
                v-if="o.condition(data)"
                class="icon"
                :icon="o.icon"
                :width="12"
                :height="12"
                :title="o.title"
                @click="(evt) => o.onClick(node, data, evt)"
              />
            </template>
          </span>
        </span>
      </template>
      <template #empty>
        <div class="tree-empty">
          <picture>
            <source srcset="@/assets/images/project-control/implementation-plan-empty.webp" type="image/webp">
            <source srcset="@/assets/images/project-control/implementation-plan-empty.png" type="image/png">
            <img
              src="@/assets/project-control/implementation-plan-empty.png"
              class="empty__img"
            >
          </picture>
          <span class="empty-prompt">
            目前暂无事项内容，请点击 <span class="prompt--light">新增事项</span> 创建
          </span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<style lang="scss" scoped>
.create-important-item-tree {
  width: 320px;
  height: 794px;
  background: #FFF;
  border-radius: 4px;
  border: 1px solid #D9DCE4;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background: #F6F8FA;
    border-radius: 4px 4px 0px 0px;

    .title_label {
      height: 17px;
      font-size: 14px;
      color: #25292C;
      line-height: 17px;
      margin-left: 16px;
    }

    .title__btn {
      margin-right: 16px;
    }
  }

  .title-line {
    height: 1px;
    background: #D9DCE4;
  }

  .search-input {
    display: flex;
    width: 286px;
    margin: 17px auto;
  }

  .tree {
    width: 286px;
    margin: 0 auto;

    .tree-node {
      flex: 1;
      display: flex;
      justify-content: space-between;
      padding-right: 8px;

      .tree-node__label {
        display: flex;
        align-items: center;
        height: 35px;
        font-size: 12px;
        color: #25292C;
        line-height: 31px;
      }

      .tree-node__icons {
        display: flex;
        gap: 4px;
      }
    }

    .tree-empty {
      display: flex;
      flex-direction: column;
      margin-top: 289px;

      .empty__img {
        width: 100px;
        height: 94px;
        object-fit: cover;
      }
      .empty-prompt {
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #989DA3;
        line-height: 20px;
        margin-top: 17px;

        .prompt--light {
          color: #2E72EF;
        }
      }
    }
  }
}
</style>
